<template>
  <div class="Lineas">
    <div id="useCharts" style="width: 100%; height: 280px"></div>
  </div>
</template>

<script>
export default {
  name: 'useCharts',
  props: ['stockUseStatusList'],
  methods: {
    myEcharts () {
      const data = this.stockUseStatusList
      console.log(data)

      const myChart = this.$echarts.init(document.getElementById('useCharts'))
      // 配置图表
      const option = {
        color: ['rgba(228, 219, 218, 1)', 'rgba(255, 170, 0, 1)'],

        tooltip: {
          trigger: 'item'
        },

        series: [
          {
            bottom: '-10%',
            name: '',
            type: 'pie',
            radius: ['32%', '40%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              // disable: false, // 是否关闭扇区高亮效果
              scale: true, // 扇区是否缩放
              scaleSize: 5,
              // 放大的尺寸，这里为了保证不放大扇区设置的，可要可不要
              label: {
                show: true,
                fontSize: 15,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: data
          }
        ]
      }
      myChart.setOption(option)
    }
  },
  mounted () {
    setTimeout(() => {
      this.myEcharts()
    }, 500)
  }
}
</script>

<style></style>
